<template>
    <div class="chat-container">
        <div>
            <h2 v-on:mouseenter="showPopup" v-on:mouseleave="hidePopup">我是聊天框</h2>
            <Bubble-Box v-bind:x="x" v-bind:y="y" content="让我们开始聊天吧！" :visible="visible" position="bottom">
            </Bubble-Box>
        </div>
        <div class="chat-messages">
            <div v-for="message in messages" :key="message.id" class="chat-message">
                <p>{{ message.sender }} {{ message.time }}</p>
                <p>{{ message.content }}</p>
            </div>
        </div>
        <div class="chat-input">
            <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
            <button @click="sendMessage">发送</button>
        </div>
    </div>
</template>
  
<script>
import { getCurrentDateTime } from "@/utils/util.js"
import { mapState, mapGetters } from 'vuex';
import BubbleBox from "../../components/BubbleBox/BubbleBox.vue"
export default {
    components: {
        BubbleBox
    },
    data() {
        return {
            messages: [],
            newMessage: '',
            websocket: null,
            visible: false,
            x: 0,
            y: 0,
        };
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    methods: {
        showPopup(event) {
            this.x = event.clientX
            this.y = event.clientY
            this.visible = true
        },
        hidePopup() {
            this.visible = false;
        },
        sendMessage() {
            if (this.newMessage.trim() !== '') {
                const message = {
                    id: this.userInfo.id,
                    sender: this.userInfo.nickName,
                    content: this.newMessage,
                    time: getCurrentDateTime('YYYY/MM/DD HH:mm:ss'),
                };
                this.websocket.send(JSON.stringify(message))
                this.newMessage = '';
            }
        },
        wsMessage() {
            // 创建 WebSocket 连接
            this.websocket = new WebSocket('ws://localhost:3000', this.userInfo.id);

            this.websocket.onopen = (e) => {
                console.log("__success_")
            }
            this.websocket.onclose = (e) => {
                console.log("关闭");
            }
            this.websocket.onerror = (e) => {
                console.log("ws连接错误", e);
            }
            // 监听消息接收事件
            this.websocket.onmessage = (event) => {
                console.log('Received message____:', event.data);
                const msg = JSON.parse(event.data);
                // 在接收到消息后进行相应的处理
                this.messages.push({
                    id: msg.id,
                    sender: msg.sender,
                    content: msg.content,
                    time: msg.time,
                });
            };
        },
    },
    created() {
        this.wsMessage()
    },
};
</script>
  
<style scoped>
.chat-container {
    height: 400px;
}

.chat-messages {
    overflow-y: scroll;
    height: 80%;
    border: 1px solid #ccc;
    padding: 10px;
}

.chat-message {
    margin-bottom: 10px;
}

.chat-input {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.chat-input input {
    flex: 1;
    height: 30px;
    margin-right: 10px;
}

.chat-input button {
    height: 30px;
}
</style>
  